<template>
    <div>
    <nav class="mui-bar mui-bar-tab footer ">
    <a class="mui-tab-item a_red_r" :class="'busiHudong'==pageName ?'mui-active':''"  @click="href(accountinfo.companyId)">
    <span class="mui-icon"><i class="index-icon  "  :class="'busiHudong'==pageName ?'active':''"></i></span>
    <span class="mui-tab-label">社群</span>
    </a>

      <router-link class="mui-tab-item a_red_r" :class="'busiManjian'==pageName ?'mui-active':''"  :to="{name:'Business_discount_set'}">
        <span class="mui-icon"><i class="collection-icon "  :class="'busiManjian'==pageName ?'active':''"></i></span>
        <span class="mui-tab-label"  >满减券</span>
      </router-link>

    <router-link class="mui-tab-item a_red_r" :class="'busiOrder'==pageName ?'mui-active':''"  :to="{name:'Business_order'}">
      <span class="mui-icon"><i class="add-icons "  :class="'busiOrder'==pageName ?'active':''"></i></span>
      <span class="mui-tab-label">订单</span>
    </router-link>

      <router-link class="mui-tab-item a_red_r" :class="'busiProd'==pageName ?'mui-active':''"  :to="{name:'Business_Cp_manage',query:{spectype:'discount',cmid:this.accountinfo.companyId} }">
        <span class="mui-icon"><i class="chat-icon "  :class="'busiProd'==pageName ?'active':''"></i></span>
        <span class="mui-tab-label">产品</span>
      </router-link>

    <router-link class="mui-tab-item a_red_r" :class="'busiMine'==pageName ?'mui-active':''"  :to="{name:'Business'}" data-ajax="falss">
    <span class="mui-icon"><i class="mine-icon"  :class="'busiMine'==pageName ?'active':''"></i></span>
    <span class="mui-tab-label">我的</span>
    </router-link>
 </nav>
  <div v-show="newhack" class="shaliang">
      <div class="banxin">
       <img src="../assets/组-10@2x.png">
      </div>
        <div class="kaitong" @click="newkai()">去开通</div>
        <div class="delete" @click="guanle()"></div>
      </div>
    </div>
</template>
<style scoped>
/* .shangjia_hd{
    background: url("../assets/business/images/hud-icon.png") no-repeat center center!important;
    background-size:100% 100%!important;
}
.shangjia_dd{
    background: url("../assets/business/images/order-icon.png") no-repeat center center!important;
    background-size:100% 100%!important;
}
.shangjia_jz{
    background: url("../assets/business/images/jiesuan-icon.png") no-repeat center center!important;
    background-size:100% 100%!important;
}
.shangjia_zk{
    background: url("../assets/business/images/discount-icon.png") no-repeat center center!important;
    background-size:100% 100%!important;
} */

.mui-bar-tab .mui-tab-item .mui-icon .chat-icon.active {
   background:url("../assets/business/images/chat-icon-active1.png") no-repeat center center !important;
    background-size:100% 100% !important;
     width:25px;
    height:25px;
}
.mui-bar-tab .mui-tab-item .mui-icon .chat-icon{
  background:url("../assets/business/images/chat-icon1.png") no-repeat center center !important;
    background-size:100% 100% !important;
     width:25px;
    height:25px;
}
.mui-bar-tab .mui-tab-item .mui-icon .add-icons{
  background:url("../assets/business/images/dingdan.png") no-repeat center center !important;
    background-size:100% 100% !important;
    width:20px;
    height:24px;
    display:block;
}
.mui-bar-tab .mui-tab-item .mui-icon .add-icons.active{
  background:url("../assets/business/images/dingdanh.png") no-repeat center center !important;
    background-size:100% 100% !important;
    width:20px;
    height:24px;
    display:block;
}
.mui-bar-tab .mui-tab-item .mui-icon .collection-icon{
   background:url("../assets/business/images/discount-icon.png") no-repeat center center !important;
    background-size:100% 100% !important;
    width:24px;
    height:22px;
    display:block;
}
.mui-bar-tab .mui-tab-item .mui-icon .collection-icon.active{
   background:url("../assets/business/images/discount-icon-active.png") no-repeat center center !important;
    background-size:100% 100% !important;
    width:24px;
    height:22px;
    display:block;
}
.mui-bar-tab .mui-tab-item .mui-icon .index-icon{
    background:url("../assets/business/images/chat-icon.png") no-repeat center center;
    background-size:100% 100%;
    width:25px;
    height:25px;
    display:block;
}
.shaliang{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.5);
  z-index:10;
}
.banxin{
  width: 84%;
  margin-left: 8%;
  margin-top: 60px;
  position:relative;
  height:460px;
  z-index:20;
}
.banxin img{
  width:100%;
  height:100%;
  vertical-align:middle;
}
.kaitong{
  height:40px;
  width:40%;
  background:green;
  border-radius:10px;
  text-align:center;
  line-height:40px;
  color:white;
  position:absolute;
  left:30%;
  top:375px;
   z-index:21;
}
.delete{
  width:30%;
  height:60px;
  position:absolute;
  left:35%;
  top:474px;
   z-index:21;
}
</style>
<script>
  export default {
    props: {
      pageName: String
    },
    data () {
      return {
        cmid:'',
        accountinfo:{},
        newhack:false
      }
    },
  methods:{
    loadaccoutinfo: function(){
			this.$http.get(this.APIURL_PREFIX+'/api/companyInfo').then((response) => {
          this.accountinfo =response.data.data;
				}).catch(function(err){
					console.log(err)
         }).then();
      },
      newkai(){
        layer.msg('去付钱')
            window.location='/wap/new_pay.html'
      },
      guanle(){
        this.newhack=false
      },
      href(id){

         this.$http.get(this.APIURL_PREFIX + '/api/wap/company/community/'+id).then((response) => {
               console.log(response)
                 if(response.data.data.payCommunity==0){
                  this.newhack=true
                 }else{
                      window.location='/wap/hudong.html?id='+id
                 }

         }).catch(function (err) {
                console.log(err)
         });
           
        
        }
  },
  mounted(){
    this.loadaccoutinfo();
  }
  }
</script>
